<template>
	<a-card class="container" v-show="!isShowDealPage">
		<template #title> 工单查询 </template>
		<template #extra>
			<a-button class="mybtn" type="primary" @click="initData" :icon="h(SearchOutlined)">查询</a-button>
			<!-- <a-button class="mybtn" :icon="h(EllipsisOutlined)">更多查询</a-button> -->
			<a-button class="mybtn" @click="resetSearch" :icon="h(RedoOutlined)">重置</a-button>
			<a-button class="mybtn" :icon="h(PrinterOutlined)" @click="printData">打印</a-button>
			<a-tooltip placement="topRight">
				<template #title>
					<span>60秒刷新一次</span>
				</template>
				<a-button class="mybtn" @click="setAutoSearch"> <SyncOutlined :spin="isAutoSearch" />自动刷新</a-button>
			</a-tooltip>
		</template>
		<a-form v-model="searchForm">
			<a-row :gutter="16">
				<a-col :span="18">
					<a-form-item label="关键词： ">
						<a-input placeholder="按流水号/报修人/维修类型等检索" v-model:value="searchForm.keyword" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item label="维修时间： " @change="initData" name="timeType">
						<a-radio-group :size="size" v-model:value="timeType" button-style="solid">
							<a-radio-button value="a">全部</a-radio-button>
							<a-radio-button value="b">近一年</a-radio-button>
							<a-radio-button value="c">近一月</a-radio-button>
							<a-radio-button value="d">近一周</a-radio-button>
							<a-radio-button value="e">昨日</a-radio-button>
							<a-radio-button value="f">今日</a-radio-button>
							<a-radio-button value="z">自定义日期</a-radio-button>
						</a-radio-group>
						<a-range-picker
							v-if="timeType == 'z'"
							format="YYYY-MM-DD"
							v-model:value="timeData"
							@change="onChange"
							style="margin-left: 8px"
							:size="size"
						/>
					</a-form-item>
				</a-col> 
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="维修类型： " name="rep_wo_sizetype">
						<a-radio-group :size="size" @change="initData" v-model:value="searchForm.rep_wo_sizetype" button-style="solid">
							<a-radio-button value="">全部</a-radio-button>
							<a-radio-button value="普通维修">普通维修</a-radio-button>
							<a-radio-button value="大中型维修">大中型维修</a-radio-button>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="报修区域： ">
						<a-select @change="initData"
							placeholder="请选择报修区域"
							v-model:value="searchForm.rep_wo_tj_qy_1_id"
							:field-names="{ label: 'name', value: 'id' }"
							allowClear
							:options="qys"
						></a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="报修项目 ">
						<a-select @change="initData"
							placeholder="请选择报修项目"
							v-model:value="searchForm.rep_wo_tj_lb_1_id"
							:field-names="{ label: 'name', value: 'id' }"
							allowClear
							:options="lbs"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="承修单位 ">
						<a-select @change="initData"
							placeholder="请选择承修单位"
							v-model:value="searchForm.rep_u_id"
							:field-names="{ label: 'rep_u_name', value: 'rep_u_id' }"
							allowClear
							:options="dws"
						></a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="完工费用： " name="type">
						<a-radio-group ref="rep_wo_charge_type" @change="initData" v-model:value="searchForm.rep_wo_charge_type" :options="plainOptions" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="报修人身份： " name="type">
						<a-radio-group name="radioGroup" @change="initData" v-model:value="searchForm.rep_wo_identity_type">
							<a-radio value="">全部</a-radio>
							<a-radio value="学生">学生</a-radio>
							<a-radio value="老师">老师</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="16">
				<a-col :span="8">
					<a-form-item label="报修来源： " name="rep_wo_sourcetype">
						<a-radio-group name="radioGroup" @change="initData" v-model:value="searchForm.rep_wo_sourcetype">
							<a-radio value="">全部</a-radio>
							<a-radio value="移动端">移动端</a-radio>
							<a-radio value="电脑端">电脑端</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="报修来源： " name="rep_wo_source">
						<a-radio-group name="radioGroup" @change="initData" v-model:value="searchForm.rep_wo_source">
							<a-radio value="">全部</a-radio>
							<a-radio value="自主报修">自主报修</a-radio>
							<a-radio value="电话报修">电话报修</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>
			<a-form-item label="工单状态：" name="rep_wo_instate">
				<a-radio-group :size="size" @change="initData" v-model:value="searchForm.rep_wo_instate" button-style="solid" :options="repWoInstateOptions">
				</a-radio-group>
			</a-form-item>
			<a-form-item label="条件查询：" name="otherParamVal">
				<a-input v-model:value="otherParamVal" style="width: 500px">
					<template #addonBefore>
						<a-select v-model:value="otherParamType" style="width: 150px">
							<a-select-option value="rep_wo_xh_gh">报修人工号学号</a-select-option>
							<a-select-option value="rep_wo_phone">报修人手机号码</a-select-option>
							<a-select-option value="rep_wo_repairbodyname">报修人姓名</a-select-option>
						</a-select>
					</template>
				</a-input>
			</a-form-item>
		</a-form>

		<a-table
			:dataSource="dataSource"
			:columns="columns"
			rowKey="rep_wo_id"
			:rowSelection="{
				type: 'checkbox',
				selectedRowKeys: selectedRowKeys.value,
				onChange: onSelectChange,
			}"
			size="small"
			bordered
			:scroll="{
				scrollToFirstRowOnChange: false,
				x: '100%',
				y: '530px',
			}"
			@change="onPaginationChange"
			:pagination="pagination"
			:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'operation'">
					<a-button type="link" v-if="record.rep_wo_instate != '删除' && record.rep_wo_instate != '结束'" @click="toDeal(record)"
						>处理</a-button
					>
				</template>
				<template v-else-if="column.key === 'rep_wo_instate'">
					<a-tag v-if="record.rep_wo_instate1 == '待审核' || record.rep_wo_instate1 == '待受理'" color="#2db7f5">
						{{ record.rep_wo_instate1 }}
					</a-tag>
					<a-tag v-if="record.rep_wo_instate1 == '待完工'" color="#108ee9">
						{{ record.rep_wo_instate1 }}
					</a-tag>
					<a-tag v-if="record.rep_wo_instate1 == '已完工'" color="#87d068">
						{{ record.rep_wo_instate1 }}
					</a-tag>
					<a-tag v-if="record.rep_wo_instate1 == '删除驳回'" color="#f50">
						{{ record.rep_wo_instate1 }}
					</a-tag>
				</template>
			</template>
		</a-table>
	</a-card>
	<a-card v-show="isShowDealPage" style="height: 100%;" :bodyStyle="{height:'100%'}">
		<template #title>
			<a-button :icon="h(ArrowLeftOutlined)" @click="goBackToList">返回</a-button>
			<span class="title-txt"> 工单处理</span>
		</template>
		<iframe :src="dealPageUrl" width="100%" height="1000px" style="border: 0;height: 100%"></iframe>
	</a-card> 
	<a-modal v-model:visible="isShowPrintPage" :destroyOnClose="true" width="1366px" :footer="null" title="打印记录">
		<iframe :src="printPageUrl" width="100%" height="680px" style="border: 0"></iframe>
	</a-modal>
</template>
<script setup>
	import { ArrowLeftOutlined } from '@ant-design/icons-vue';
	import { ref, reactive, h, onMounted, computed } from 'vue';
	import { RepairApi } from '@/api/repair-api';
	import tool from '@/utils/tool';
	import { KEY_CONST } from '@/constants/system-const';
	import { SyncOutlined, PrinterOutlined, RedoOutlined, EllipsisOutlined, SearchOutlined } from '@ant-design/icons-vue';
	import dayjs from 'dayjs';

	const size = ref('small'); //尺寸
	const pagenumber = ref(1);
	const pagesize = ref(10);
	const total = ref(0);
	const isShowSelfDay = ref(false); //是否显示自定义时间
	const timeType = ref('a'); //时间类型
	const qys = ref([]); //区域
	const lbs = ref([]); //项目
	const dws = ref([]); //承修单位
	const isAutoSearch = ref(false);
	const otherParamType = ref('rep_wo_xh_gh'); //查询条件类型
	const otherParamVal = ref(''); //查询条件值
	const dataSource = ref([]); //页面数据
	const isShowPrintPage = ref(false); //是否显示打印页面
	const isShowDealPage = ref(false); //是否工单处理页面
	
	const printPageUrl = ref(''); //打印地址
	const selectedRowKeys = ref([]);
	const timeData = ref([]);
	const dealPageUrl = ref("");
	let selectDay = '';

	// ----------------------查询表单部分内容---------------------
	const pagination = computed(() => ({
		position: ['bottomCenter'],
		current: pagenumber.value,
		pageSize: pagesize.value,
		total: total.value,
		showSizeChanger: true,
		showTotal: (t) => `共 ${t}条`,
	}));
	// 查询表单数据
	let searchForm = reactive({
		rep_wo_sizetype: '', //维修类型
		rep_wo_charge_type: '', //完工费用
		rep_wo_identity_type: '',
		rep_wo_instate: '',
		keyword: '',
		rep_wo_tj_qy_1_id: '',
		rep_wo_tj_lb_1_id: '',
		rep_u_id: '',
		rep_wo_source: '',
		rep_wo_sourcetype: '',
	});
	const plainOptions = [
		{ label: '全部', value: '' },
		{ label: '收费', value: '收费' },
		{ label: '免费', value: '免费' },
	];
	const repWoInstateOptions = ref([]);

	//--------------查询条件部分
	const onChange = (value, dateString) => {
		selectDay = dateString.join('至');
	};

	onMounted(() => {
		initParam();
		initLocalParam();
		initData();
	});
	const initParam = async function () {
		tool.showLoading();
		const rest = await RepairApi.getPageRef();
		tool.hideLoading();
		let status = [
			{
				label: '全部',
				value: '',
			},
		];
		rest.查询条件中状态字典新.forEach((element) => {
			status.push({
				label: element.rep_wo_instate1,
				value: element.rep_wo_instate1,
			});
		});
		repWoInstateOptions.value = status;
		qys.value = rest.查询条件中区域字典;
		lbs.value = rest.查询条件中项目字典;
		dws.value = rest.repair_unit;
	};
	const initLocalParam = function () {
		let BILL_SEARCH_PARAM = tool.readLocalStorage('BILL_SEARCH_PARAM');
		if (BILL_SEARCH_PARAM) {
			BILL_SEARCH_PARAM = JSON.parse(BILL_SEARCH_PARAM);
			console.log(BILL_SEARCH_PARAM);
			searchForm = Object.assign(searchForm, BILL_SEARCH_PARAM);
			if (BILL_SEARCH_PARAM.timeType) {
				timeType.value = BILL_SEARCH_PARAM.timeType;
				if (BILL_SEARCH_PARAM.timeType == 'z' && BILL_SEARCH_PARAM.selectDay) {
					const dateFormat = 'YYYY-MM-DD';
					const dates = BILL_SEARCH_PARAM.selectDay.split('至');
					timeData.value = [dayjs(dates[0], dateFormat), dayjs(dates[1], dateFormat)];
				}
			}
		}
		tool.removeLocalStorage('BILL_SEARCH_PARAM');
	};
	//查询数据
	const initData = async function () {
		if(timeType.value=='z' && selectDay.length==0){
			tool.warning("请输入自定义日期！");
			return;
		}
		let time = '';
		if (timeType.value != 'z') {
			time = tool.getTime(timeType.value);
		} else {
			time = selectDay;
		}
		let param = {
			...searchForm,
			pagenumber: pagenumber.value,
			pagesize: pagesize.value,
			rep_wo_insert_time: time,
		};
		if (otherParamType.value == 'rep_wo_xh_gh') {
			param.rep_wo_xh_gh = otherParamVal.value;
		} else if (otherParamType.value == 'rep_wo_repairbodyname') {
			param.rep_wo_repairbodyname = otherParamVal.value;
		} else if (otherParamType.value == 'rep_wo_phone') {
			param.rep_wo_phone = otherParamVal.value;
		}
		tool.showLoading();
		const rest = await RepairApi.getOrdersWidthMore(param);
		tool.hideLoading();
		if (rest.code != '0') {
			tool.error(rest.codemessage);
		} else {
			total.value = rest.allsize;
			dataSource.value = rest.data;
		}
	};
	//重置
	const resetSearch = function () {
		otherParamVal.value = '';
		searchForm = Object.assign(searchForm, {
			rep_wo_sizetype: '',
			rep_wo_charge_type: '',
			rep_wo_identity_type: '',
			rep_wo_instate: '',
			keyword: '',
			rep_wo_tj_qy_1_id: '',
			rep_wo_tj_lb_1_id: '',
			rep_u_id: '',
			rep_wo_source: '',
			rep_wo_sourcetype: '',
		});
		initData();
	};
	//打印
	const printData = function () {
		if (selectedRowKeys.value.length == 0) {
			tool.warning('请选择工单！');
			return;
		}
		const ids = selectedRowKeys.value.join(';');
		const token = tool.readLocalStorage(KEY_CONST.USER_TOKEN);
		printPageUrl.value =
			import.meta.env.VITE_APP_PAGE_URL + '/i/system/view.jsp?viewid=admin_repair_workorder_dayin2_view&rep_wo_id=' + ids + '&token=' + token;
		isShowPrintPage.value = true;
	};
	//设置自动刷新
	let timeOutId = '';
	const setAutoSearch = function () {
		isAutoSearch.value = !isAutoSearch.value;
		if (isAutoSearch.value) {
			startTimer();
		} else {
			clearTimeout(timeOutId);
		}
	};
	const startTimer = function () {
		timeOutId = setTimeout(() => {
			initData();
			startTimer();
		}, 60000);
	};
	//选择数据记录
	const onSelectChange = function (skeys) {
		selectedRowKeys.value = skeys;
	};

	const onPaginationChange = function (page) {
		pagenumber.value = page.current;
		pagesize.value = page.pageSize;
		initData();
	};
	const toDeal = function (record) {
		isShowDealPage.value = true;
		const token = tool.readLocalStorage(KEY_CONST.USER_TOKEN);
		dealPageUrl.value =
			import.meta.env.VITE_APP_PAGE_URL +
			'/i/system/view.jsp?viewid=admin_repair_workorder_done_view&rep_wo_id=' +
			record.rep_wo_id +
			'&token=' +
			token;
	};
	// ----------------------列表相关部分---------------------
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			key: 'index',
			name: 'index',
			fixed: 'left',
			width: '50px',
			align: 'center',
			customRender: (record) => `${record.index + 1}`,
		},
		{
			title: '状态',
			dataIndex: 'rep_wo_instate',
			key: 'rep_wo_instate',
			width: '80px',
			align: 'center',
		},
		{
			title: '工单流水号',
			dataIndex: 'rep_wo_serialnumber',
			width: '180px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '报修时间',
			dataIndex: 'rep_wo_insert_time',
			align: 'center',
			width: '150px',
			ellipsis: true,
		},
		{
			title: '报修人',
			dataIndex: 'rep_wo_repairbodyname',
			width: '90px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '学工号',
			dataIndex: 'rep_wo_phone',
			width: '120px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '维修类型',
			dataIndex: 'rep_wo_sizetype',
			width: '90px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '区域',
			dataIndex: 'rep_a_nameall',
			width: '200px',
			ellipsis: true,
		},
		{
			title: '项目',
			dataIndex: 'rep_i_nameall',
			width: '150px',
			ellipsis: true,
		},
		{
			title: '故障描述',
			dataIndex: 'rep_wo_fault_description',
			width: '250px',
			ellipsis: true,
		},
		{
			title: '手机号',
			dataIndex: 'rep_wo_phone',
			width: '120px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '报修来源',
			dataIndex: 'rep_wo_source',
			width: '100px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '报修方式',
			dataIndex: 'rep_wo_sourcetype',
			width: '100px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '是否紧急',
			dataIndex: 'rep_wo_urgent',
			width: '80px',
			align: 'center',
			ellipsis: true,
		},
		{
			fixed: 'right',
			title: '操作',
			width: '80px',
			align: 'center',
			key: 'operation',
		},
	];
	
	const goBackToList = function(){
		isShowDealPage.value = false;
	}
</script>
<style lang="less" scoped>
	.container {
		width: 98%;
		margin: 8px auto;
		.search-ref {
			margin-left: 24px;
			width: 300px;
		}
		.mybtn {
			margin: 0 4px;
		}
	}
</style>
